<template>
  <div class="container">
    <div class="main-tab">
      <x-header id="header" slot="header" :left-options="{showBack: false}" >
        <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
        <span slot="default" class="header-tit">验证手机</span>
      </x-header>
      <div class="main-headerAndTab">
        <group gutter="0">
            <x-input placeholder="请输入手机号码" is-type="china-mobile" v-model="mobile">
              <div slot="label" style="border-right: 1px solid #F5F5F5;"><span style="margin-right: 1.07rem">+86</span></div>
            </x-input>
          <x-input placeholder="请输入验证码" class="input"  mask="99999999999"   :max="4" v-model="code">
            <x-button slot="right" type="primary" mini v-if="hasCount" @click.native="getIdentifyingCode" class="verification" plain>发送验证码</x-button>
            <span slot="right" v-if="!hasCount" class="Obtain"><span class="second">{{count}}</span>S后重新获取</span>
          </x-input>
          <cell>
          </cell>
        </group>
      </div>
      <div style="width: 92%;margin-left: 4%" >
        <x-button style="border-radius: 99px;background: #AD2532"><span slot="default" style="color: #FFFFFF">确认</span></x-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {sendSms} from '@/api/user'
    export default {
        name: "phoneNum",
      methods:{
        back(){
          this.$router.go(-1)
        },
        getIdentifyingCode(){
          console.log(this.mobile)
          this.hasCount = false
          //发送验证码
          sendSms(parseInt(this.mobile)).then( () =>{
            this.$vux.toast.show({
              text: '验证码已发送',
              type: 'success'
            })
          })
          //时间打点
          this.timer = setInterval(() => {
            this.count--;
            if (this.count === 0) {
              clearInterval(this.timer)
              this.count = 60;
              this.hasCount = true
            }
          }, 1000)
        },
      },
      data(){
          return{
            hasCount:true,
            count:60,
            mobile:''
          }
      }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .container{
    width: 100%;
    height: 100vh;
    background-color: white;
  }
  .verification {
    font-size: 14px;
    color: #4A90E2;
    border: none;
    padding: 0;
  }
  .Obtain{
    font-size: 14px;
  }
  .second{
    font-size: 16px;
  }
</style>
